<template>
	<view class="page">
		<view class="tcard">
			<tabs :list="types" :current.sync="actType" />

			<view class="component-qr">
				<tki-qrcode ref="qrcode" onval :val="qrCode || 123" :size="300" :load-make="true"
					:show-loading="false" />
			</view>

			<view class="name">
				{{userInfo.name}}
			</view>

			<view class="info">
				<view class="item flexR" v-if="actType == 0">
					<view class="label">性　　别：</view>
					<view class="value">{{userInfo.sex == '1' ? '男' : '女'}}</view>
				</view>
				<view class="item flexR" v-else-if="actType == 1">
					<view class="label">门<span class="seat"></span>诊<span class="seat"></span>号：</view>
					<view class="value">xxxxxxxxx</view>
				</view>
				<view class="item flexR" v-else-if="actType == 2">
					<view class="label">住<span class="seat"></span>院<span class="seat"></span>号：</view>
					<view class="value">xxxxxxxxxxx</view>
				</view>

				<view class="item flexR">
					<view class="label">证件类型：</view>
					<view class="value">身份证</view>
				</view>
				<view class="item flexR">
					<view class="label">证件号码：</view>
					<view class="value">{{cardHide(userInfo.idCard)}}</view>
				</view>
				<view class="item flexR">
					<view class="label">手机号码：</view>
					<view class="value">{{phoneHide(userInfo.phoneNumber)}}</view>
				</view>
				<view class="item flexR">
					<view class="label">地　　址：</view>
					<view class="value">{{userInfo.ssxaddress}}</view>
				</view>
			</view>
		</view>

		<template v-if="actType == 0">
			<view class="">
				<view class="btm-btn">进入卡包</view>
				<view class="text-btn" @click="show1 = true">解绑电子健康卡</view>
			</view>
		</template>

		<template v-else-if="actType == 1">
			<view class="">
				<view class="btm-btn">绑定新就诊卡</view>
				<view class="text-btn">解绑电子就诊卡</view>
			</view>
		</template>

		<template v-else-if="actType == 2">
			<view class="">
				<view class="btm-btn">绑定住院号</view>
				<view class="text-btn">解绑住院号</view>
			</view>
		</template>

		<Dialog :show.sync="show1" title="温馨提示" @confirm="confirm">
			确认解绑电子健康卡吗？
		</Dialog>
		<Dialog :show.sync="show2" @confirm="confirm">
			xxx
		</Dialog>
		<Dialog :show.sync="show3" @confirm="confirm">
			xxx
		</Dialog>
	</view>
</template>

<script>
	import tabs from '@/components/leftTabs/leftTabs.vue'
	import tkiQrcode from '@/components/QrCode/tki-qrcode.vue'
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import Dialog from '@/components/Dialog/Dialog.vue'

	function cardHide(card = '') {
		const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份证号前6位和后4位的正则表达式
		const maskedIdCard = card.replace(reg, '$1******$2'); // 身份证号脱敏，将中间8位替换为“*”
		return maskedIdCard; // 输出：371782******5896
	}

	function phoneHide(phone = '') {
		let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
		phone = phone.replace(reg, '$1****$2');
		return phone; // 185****6696
	}
	export default {
		components: {
			tabs,
			tkiQrcode,
			Dialog
		},
		data() {
			return {
				cardHide,
				phoneHide,
				types: [{
					name: '电子健康卡'
				}, {
					name: '电子就诊卡'
				}, {
					name: '住院号'
				}],
				actType: 0,
				show1: false,
				show2: false,
				show3: false,
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			confirm() {
				uni.showToast({
					title: '确定'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tcard {
		padding: 32upx;

		::v-deep.tabs {
			padding: 0;
		}
	}

	.component-qr {
		margin-top: 90upx;
	}

	.name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36upx;
		color: #000000;
		line-height: 44upx;
		text-align: center;
		margin: 32upx 0 48upx;
	}

	.info {
		.item {
			justify-content: flex-start;
			margin-top: 24upx;

			.label {
				width: 5em;
				flex-shrink: 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.7);
				line-height: 44upx;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28upx;
				color: rgba(0, 0, 0, 0.7);
				line-height: 44upx;
			}

			&:nth-child(1) {
				margin-top: 0;

				.value {
					color: #000;
				}
			}
		}
	}

	.btm-btn {
		margin-top: 48upx;
	}

	.text-btn {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28upx;
		line-height: 44upx;
		text-align: center;
		margin-top: 24upx;
		color: $theme-color;
	}

	.seat {
		display: inline-block;
		width: 0.5em;
	}
</style>